<template>
  <div id="app">
    <div class="header">
      <Header :navBar="navBar" @change="handleNavBarChange" />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from '@/components/header';
  export default {
    name: 'App',
    components: {
    Header
  },
  data() {
    return{
      navBar:[{
          title:'首页',
          url:'/'
        },{
          title:'软件下载',
          url:'/download'
        },{
          title:'使用文档',
          url:'/documention'
        },{
          title:'硬件方案',
          url:''
        },{
          title:'新闻动态',
          url:''
        },{
          title:'关于我们',
          url:''
        }],
        windowWidth:''
    }
  },
  methods:{
    handleNavBarChange(item){

      console.log(this.$route.path)
      if(item.title == '关于我们' && this.$route.path == '/'){
        if(this.windowWidth>750){
          document.getElementById("homeFooter").scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
        }else{
          document.getElementById("footer_move").scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
        }
      }

      if(this.$route.path == '/' && item.title == '首页'){
        document.getElementById("banner").scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
      }

      if(item.title == '关于我们' &&  this.$route.path != '/'){
        this.$router.push({
            path: '/'
          })
          if(this.windowWidth>750){
            setTimeout(()=>{
              document.getElementById("homeFooter").scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
            },600)
          }else{
            setTimeout(()=>{
              document.getElementById("footer_move").scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
            },0)
          }
      }

    }
  },
  mounted(){
    this.$api.GetListByType(0).then((res)=>{
      this.$store.commit('setFooterData',res)
    })
    if(this.$route.path == '/home'){
      this.$store.commit('navIndexCount',0)
    }else if(this.$route.path == '/download'){
      this.$store.commit('navIndexCount',1)
    }else if(this.$route.path == '/documention'){
      this.$store.commit('navIndexCount',2)
    }

    window.onresize = () => {
        this.windowWidth = document.documentElement.clientWidth  // 宽
    },
    this.windowWidth = window.innerWidth
  }
  }
</script>

<style>
  html,
  body,
  #app {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 10px;
  }

  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
  }
</style>